<!---测试vue的监视属性-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试vue的监视属性简写</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <span>今天天气{{weather}}-{{X}}</span>
        <button @click = "changeWeather">切换天气</button><br/> <!--绑定事件的时候@click = "XXX" XXX可以是一些简单的计算-->
    </div>
     <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data: function(){
                return {
                   isHot: true,
                   X:1
                }
            },
            //当读取天气必须触发计算isHot属性的值
            computed:{
                weather:{
                    get(){
                        return this.isHot ? '炎热' : '凉爽'
                    }
                }
            },
            //当点击切换天气时必须触发修改isHot的值 
            methods:{
                changeWeather(){
                    this.isHot = !this.isHot
                    this.X++
                }
            },
           
            watch:{
                 //原始方式
                // isHot:{
                //     handler(newValue,oldValue){
                //         console.log("检测到isHot属性的值被修改，新值为："+newValue+",旧值为："+oldValue); 
                //     }
                // }
                //简写方式,此时监视对象watch中就不能配置其他的属性
                // isHot(newValue,oldValue){
                //     console.log("检测到isHot属性的值被修改，新值为："+newValue+",旧值为："+oldValue); 
                // }
            }

            
        })
        // 写法2：
        // vm.$watch('isHot',{
        //     handler(newValue,oldValue){
        //                 console.log("检测到isHot属性的值被修改，新值为："+newValue+",旧值为："+oldValue);
        //             }
        // })

        //简写方式
        vm.$watch('isHot',function(newValue,oldValue){
            console.log("检测到isHot属性的值被修改，新值为："+newValue+",旧值为："+oldValue);
        })
     </script>
    
</body>
</html>